<template>
    <div class="edu-page-warp" v-if="isShowPage">
        <!--是否有权限访问-->
        <div v-if="isPowerFlag">
            <el-steps :active="1" align-center style="margin:15px">
                <el-step
                    :title="item.title"
                    :description="item.description"
                    :status="item.status"
                    v-for="item in items"
                    :key="item.id"
                ></el-step>
            </el-steps>
            <el-card
                shadow="never"
                body-style="padding: 30px;background-color:#ffffff"
                v-if="applyMsg.status=='2'"
            >
                <div style="color:#2B3B4E;font-size:18px;margin-bottom:20px;">我的报名</div>
                <div
                    style="margin-bottom:6px;"
                    v-if="minorConfig.signSwitch*1==1&&!!minorConfig.signSwitchStartTime&&!!minorConfig.signSwitchEndTime"
                >
                    <span style="font-size:12px">{{msg.grade+"年度辅修报名有效时间为"}}</span>
                    <span
                        style="color:red;font-size:12px"
                    >{{msg.signSwitchStartTime + "至" + msg.signSwitchEndTime+","}}</span>
                    <span style="font-size:12px">请在有效时间内进行报名</span>
                </div>
                <div style="margin-bottom:6px" v-else>
                    <span style="font-size:12px">微专业辅修报名未开始</span>
                </div>
                <el-form
                    :model="query"
                    label-position="left"
                    label-width="80px"
                    v-if="new Date().getTime()> (minorConfig.signSwitchStartTime*1)&&new Date().getTime()<(minorConfig.signSwitchEndTime*1)"
                >
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <el-form-item label="辅修学校:" prop="minorUniversity" class="no-bottom">
                                <el-select
                                    clearable
                                    v-model="queryParams.schoolId"
                                    placeholder="选择辅修学校"
                                    filterable
                                    style="width: 100%"
                                    @change="search(1)"
                                >
                                    <el-option
                                        v-for="item in options.minorUniversity"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="进阶层次:">
                                <el-select
                                    clearable
                                    v-model="queryParams.advancedLevelCode"
                                    placeholder="选择进阶层次"
                                    filterable
                                    style="width: 100%"
                                    @change="search(2)"
                                >
                                    <el-option
                                        v-for="item in options.advancedLevel"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <edu-table
                    :data="tableData.list"
                    :order="false"
                    :selection="false"
                    style="width: 100%"
                    @page-change="pageChange"
                    :total="tableData.total_"
                    :pageSize="tableData.pageSize_"
                >
                    <el-table-column
                        :label="$t('minor.table.minorSchool')"
                        prop="schoolName"
                        min-width="120"
                        show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                        :label="$t('minor.table.minorMajor')"
                        prop="majorNameZh"
                        min-width="120"
                        show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                        :label="$t('minor.table.advancedLevel')"
                        prop="advancedLevelName"
                        min-width="120"
                        show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                        :label="$t('minor.table.minorPointRequired')"
                        prop="gradePoint"
                        min-width="120"
                        show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                        :label="$t('minor.table.formEnrollNum')"
                        prop="enrollmentNum"
                        min-width="120"
                        show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                        :label="$t('minor.table.prerequisiteCoursePoint')"
                        prop="pointAndCourse"
                        min-width="120"
                        show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                        :label="$t('minor.table.minRequiredPoint')"
                        prop="minEntryPoint"
                        min-width="120"
                        show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                        :label="$t('minor.table.accessory')"
                        max-width="60"
                        fixed="right"
                        v-if="new Date().getTime()> (minorConfig.signSwitchStartTime*1)&&new Date().getTime()<(minorConfig.signSwitchEndTime*1)"
                    >
                        <template slot-scope="props">
                            <el-button
                                v-if="props.row.apply==='0'"
                                type="text"
                                @click="operate(3,props.row)"
                                size="mini"
                            >{{$t('minor.table.change')}}</el-button>
                            <el-button
                                v-else-if="props.row.apply==='1'"
                                type="text"
                                @click="operate(1,props.row)"
                                size="mini"
                                :disabled="isDisabled"
                            >{{$t('minor.table.apply')}}</el-button>
                        </template>
                    </el-table-column>
                </edu-table>
            </el-card>
            <el-card shadow="never" body-style="padding: 30px;" v-else-if="applyMsg.status==='1'">
                <div class="div">
                    <i class="el-icon-success" style="font-size:100px;color:#52C41A"></i>
                    <span
                        style="font-size:24px;color:#000000;margin-top:30px;margin-bottom:20px"
                    >报名成功</span>
                    <span>你已经被辅修专业”{{applyMsg.majorNameZh}}“成功录取。</span>
                </div>
            </el-card>
            <el-card shadow="never" body-style="padding: 30px;" v-else-if="applyMsg.status=== '-1'">
                <div class="div">
                    <i class="el-icon-error" style="font-size:100px;color:#D61E27"></i>
                    <span
                        style="font-size:24px;color:#000000;margin-top:30px;margin-bottom:20px"
                    >审核未通过</span>
                    <span>你所报名的”{{applyMsg.majorNameZh}}“专业审核未通过，请再接再厉。</span>
                </div>
            </el-card>
            <el-card shadow="never" body-style="padding: 30px;" v-else-if="applyMsg.status=== '0'">
                <div class="div">
                    <i class="el-icon-time" style="font-size:100px;color:blue"></i>
                    <span
                        style="font-size:24px;color:#000;margin-top:30px;margin-bottom:20px"
                    >待录取</span>
                    <span>你所报名的”{{applyMsg.majorNameZh}}“专业处于待录取状态，请稍候。</span>
                </div>
            </el-card>
            <!-- 辅修报名/变更模态框 -->
            <el-dialog
                :visible.sync="minorApplyDialog"
                :title="`辅修报名-${majorName}`"
                width="45%"
                :close-on-click-modal="false"
                close="this.minorApplyDialog=false"
            >
                <el-form
                    :rules="outCamousRules"
                    :model="applyQueryParams"
                    label-position="right"
                    label-width="110px"
                >
                    <el-row style="height: 50px;" :gutter="20">
                        <el-col :span="20">
                            <el-form-item label="辅修学校名称:">
                                <el-input
                                    style="margin-left:10px"
                                    v-model="applyQueryParams.schoolName"
                                    :value="applyQueryParams.schoolName"
                                    :disabled="true"
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row style="height: 50px;" :gutter="20">
                        <el-col :span="20">
                            <el-form-item label="辅修专业名称:">
                                <el-input
                                    style="margin-left:10px"
                                    v-model="applyQueryParams.majorNameZh"
                                    :value="applyQueryParams.majorNameZh"
                                    :disabled="true"
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row style="height: 50px;" :gutter="20">
                        <el-col :span="20">
                            <el-form-item label="平均绩点要求:">
                                <el-input
                                    style="margin-left:10px"
                                    v-model="applyQueryParams.gradePoint"
                                    :value="applyQueryParams.gradePoint"
                                    :disabled="true"
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="20">
                            <el-form-item label="先修课绩点要求:">
                                <el-table
                                    :data="applyQueryParams.pointList"
                                    style="margin-left:10px;"
                                    class="table"
                                >
                                    <el-table-column
                                        :label="$t('minor.table.prerequisiteCourse')"
                                        prop="prerequisiteCourse"
                                        min-width="50"
                                    ></el-table-column>
                                    <el-table-column
                                        :label="$t('minor.table.point')"
                                        prop="point"
                                        min-width="50"
                                    ></el-table-column>
                                </el-table>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col
                            :span="16"
                            style="display:flex;flex-direction:row;align-items:center;margin:10px 0 10px 50px"
                        >
                            <div style="color:#8896A7;font-size:12px;">上传附件：</div>
                            <el-upload
                                :headers="{'X-Token': $store.state.session.sessionid}"
                                :data="{bucketname: 'face', folderpath: 'file'}"
                                :on-preview="handleAvatarPreview"
                                :on-remove="handleAvatarRemove"
                                :on-success="handleUploadSuccess"
                                :file-list="examineFileList"
                                :before-upload="beforeAvatarUpload"
                                accept="image/jpg, image/jpeg, image/png"
                                :limit="1"
                                ref="uploadFile"
                                class="upload-demo"
                                action="/api/commonservice/obsfile/uploadfile"
                            >
                                <el-button size="small" type="primary">点击上传</el-button>
                            </el-upload>
                            <!-- <div style="color:#8896A7;font-size:12px;">上传附件：</div>
                            <el-button :key="item" type="primary" @click="handleGetFile(item)">选择文件</el-button>-->
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="20">
                            <div class="text">1、辅修报名允许变更，已报名在截至时间一个小时内不允许变更；</div>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="20">
                            <div class="text">2、辅修报名时请注意先修课要求是否符合；</div>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="20">
                            <div
                                class="text"
                            >3、辅修报名时根据学院要求上传资料附件（图片格式：JPG、JPEG、PNG，大小不超过4MB），为报名审核时使用。具体附件要求请参考辅修报名公告；</div>
                        </el-col>
                    </el-row>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="minorApplyDialog = false">{{ $t("minor.table.cancel") }}</el-button>
                    <el-button type="primary" @click="operate(2)">{{ $t("minor.table.confirm") }}</el-button>
                </span>
            </el-dialog>
        </div>
        <div class="no-power" v-else>
            <img src="/static/images/icon_nopower.png" />
            <p>抱歉，你无权访问该页面</p>
            <el-button type="primary" @click="returnIndex">返回首页</el-button>
        </div>
    </div>
</template>

<script>
import {
    queryUniversityDic,
    queryAdvancedLevelDic,
    queryMinorConfigInfo,
    queryMinorProfessionForStudent,
    addApplyInfo,
    queryIsApplyByStudentNo,
    queryIsPower,
    cancelApply,
    checkIsApply
} from "common/src/api/minor/minorSign.js";
import * as INDEX from "common/src/utils/index";
export default {
    data() {
        return {
            isOnCampus: "",
            isDisabled: false,
            minorApplyDialog: false,
            majorName: "",
            applyQueryParams: {},
            applyMsg: {
                status: "2",
                majorNameZh: ""
            },
            blockList: true,
            currentStep: "",
            items: [
                { title: "报名中", description: "", status: "wait" },
                { title: "审核中", description: "", status: "wait" },
                { title: "完成报名", description: "", status: "wait" }
            ],
            minorConfig: {},
            msg: {},
            calendarInfo: "",
            examineFileList: [],
            examineInfoList: [],
            isOption: 0,
            queryParams: {
                minorGrade: "",
                schoolId: "",
                advancedLevelCode: "",
                pageNum_: 1,
                pageSize_: 20
            },
            options: {
                minorUniversity: [],
                advancedLevel: [],
                copyAdvancedLevel: [],
                status: [
                    {
                        value: "0",
                        label: "否"
                    },
                    {
                        value: "1",
                        label: "是"
                    }
                ],
                minorProfessCultureScheme: [],
                faculty: [],
                school: [],
                professsionName: []
            },
            tableData: {},
            isPowerFlag: false, //是否有权限访问
            isShowPage: false //是否显示页面
        };
    },
    watch: {
        "queryParams.schoolId": function(val, oldval) {
            this.queryParams.advancedLevelCode = "";
            if (!val) {
                this.options["advancedLevel"] = this.options[
                    "copyAdvancedLevel"
                ];
            } else {
                const campusMark = this.options["minorUniversity"].find(
                    e => e.value * 1 == val * 1
                ).isOnCampus;
                this.options["advancedLevel"] = this.options[
                    "copyAdvancedLevel"
                ].filter(e => {
                    return e.isOnCampus * 1 == campusMark * 1;
                });
            }
        }
    },
    created() {
        if (!this.$checkMinor()) return;
        //是否有权限访问
        this.isPowerFun();
        this.queryMinorConfig();
        this.initOptions();
    },
    methods: {
        //是否有权限访问
        async isPowerFun() {
            try {
                const res = await queryIsPower();
                if (res.code == 200) {
                    this.isShowPage = true;
                    this.isPowerFlag = res.data;
                }
            } catch (err) {
                console.log(err);
            }
        },
        // 初始化下拉框
        async initOptions() {
            try {
                // 查询辅修学校
                const unDic = await queryUniversityDic();
                if (unDic.code == 200) {
                    unDic.data.length > 0 &&
                        unDic.data.forEach(e => {
                            this.options["minorUniversity"].push({
                                label: e.minorUniversityName,
                                value: e.minorUniversityCode,
                                isOnCampus: e.isOnCampus
                            });
                        });
                }
                // 查询进阶层次
                const adlDic = await queryAdvancedLevelDic();
                if (adlDic.code == 200) {
                    const list = [];
                    adlDic.data.length > 0 &&
                        adlDic.data.forEach(e => {
                            list.push({
                                label: e.advancedLevelName,
                                value: e.advancedLevelCode,
                                isOnCampus: e.sourceId
                            });
                        });
                    this.options["advancedLevel"] = list;
                    //此数组作为选择学校后过滤进阶层次使用
                    this.options["copyAdvancedLevel"] = _.cloneDeep(list);
                }
            } catch (err) {
                console.log(err);
            }
        },
        async queryMinorConfig() {
            try {
                const configData = await queryMinorConfigInfo();
                if (configData.code == 200) {
                    this.queryParams.minorGrade = configData.data[0].grade;
                    this.minorConfig = configData.data[0];
                    if (
                        !!configData.data[0].signSwitch &&
                        !!configData.data[0].signSwitchStartTime &&
                        !!configData.data[0].signSwitchEndTime
                    ) {
                        const obj = {};
                        obj.grade = configData.data[0].grade;
                        obj.signSwitchStartTime = INDEX.parseTime(
                            configData.data[0].signSwitchStartTime
                        );
                        obj.signSwitchEndTime = INDEX.parseTime(
                            configData.data[0].signSwitchEndTime
                        );
                        this.msg = obj;
                    }

                    //请求学校专业参数维护数据判断审核状态
                    if (
                        configData.data[0].signSwitch * 1 == 1 &&
                        !!configData.data[0].signSwitchStartTime &&
                        !!configData.data[0].signSwitchEndTime
                    ) {
                        if (
                            new Date().getTime() >=
                                configData.data[0].signSwitchStartTime &&
                            new Date().getTime() <=
                                configData.data[0].signSwitchEndTime
                        ) {
                            let times = INDEX.parseTime(
                                configData.data[0].signSwitchStartTime
                            );
                            const items = this.items;
                            items[0].description = times;
                            items[0].status = "finish";
                            this.items = items;
                        } else if (
                            new Date().getTime() >
                            configData.data[0].signSwitchEndTime
                        ) {
                            const items = this.items;
                            items[0].status = "finish";
                            items[0].title = "报名已截止";
                            this.items = items;
                        } else if (
                            new Date().getTime() <
                            configData.data[0].signSwitchStartTime
                        ) {
                            const items = this.items;
                            items[0].status = "wait";
                            items[0].title = "报名尚未开始";
                            items[1].status = "wait";
                            items[2].status = "wait";
                            this.items = items;
                        }
                    } else {
                        const items = this.items;
                        items[0].status = "wait";
                        items[0].title = "报名尚未开始";
                        items[1].status = "wait";
                        items[2].status = "wait";
                        this.items = items;
                    }
                    if (
                        configData.data[0].signSwitch * 1 == 1 &&
                        configData.data[0].querySwitch * 1 == 1 &&
                        !!configData.data[0].querySwitchStartTime &&
                        !!configData.data[0].signSwitchEndTime
                    ) {
                        if (
                            new Date().getTime() >=
                                configData.data[0].signSwitchEndTime &&
                            new Date().getTime() <=
                                configData.data[0].querySwitchStartTime
                        ) {
                            const items = this.items;
                            items[1].status = "finish";
                            this.items = items;
                        }
                    } else {
                        const items = this.items;
                        items[1].status = "wait";
                        items[2].status = "wait";
                        this.items = items;
                    }
                    if (
                        configData.data[0].signSwitch * 1 == 1 &&
                        configData.data[0].querySwitch * 1 == 1
                    ) {
                        if (
                            new Date().getTime() >=
                            configData.data[0].querySwitchStartTime
                        ) {
                            const items = this.items;
                            items[1].status = "finish";
                            items[2].description = INDEX.parseTime(
                                configData.data[0].signSwitchEndTime
                            );
                            items[2].status = "finish";
                            this.items = items;
                            this.queryApplyStatus(); //请求报名最终状态接口
                        } else {
                            this.applyMsg.status = "2";
                            const items = this.items;
                            items[2].status = "wait";
                            this.items = items;
                        }
                    } else {
                        const items = this.items;
                        items[2].status = "wait";
                        items[1].status = "wait";
                        this.items = items;
                    }
                    this.search();
                }
            } catch (error) {
                console.log(error);
            }
        },
        async search(type) {
            if (!this.$checkMinor()) return;
            //type  0:全部筛选 1 :辅修专业 筛选  2 ：进阶层次筛选
            try {
                if (type == 1) {
                    this.queryParams.advancedLevelCode = "";
                }
                const result = await queryMinorProfessionForStudent(
                    this.queryParams
                );
                if (result.code == 200) {
                    let list = [];
                    let total = 0;
                    if (result.data && result.data.list) {
                        let applyMark = 0; //默认是未报名的，如果报过名将applyMark置为1
                        let resultType = result.data.list.findIndex(e => {
                            return !(e.apply * 1);
                        });
                        if (resultType > -1) {
                            applyMark = 1;
                        } else {
                            applyMark = 0;
                        }
                        //查看自己是否有报名记录，并且当前时间在报名结束时间前1小时内，禁用报名
                        if (
                            new Date().getTime() >
                                this.minorConfig.signSwitchEndTime -
                                    60 * 60 * 1000 &&
                            applyMark
                        ) {
                            //将报名按钮禁用
                            this.isDisabled = true;
                        } else {
                            this.isDisabled = false;
                        }
                        if (
                            !!this.minorConfig.querySwitchStartTime &&
                            new Date().getTime() >
                                this.minorConfig.querySwitchStartTime * 1
                        ) {
                            //过滤出属于自己的1条报名信息
                            list = result.data.list.filter(
                                e => e.apply * 1 == 0
                            );
                        } else {
                            //将审核中时，数据列表不显示（报名结束时间-查询开始时间）
                            if (
                                !(
                                    !!this.minorConfig.querySwitchStartTime &&
                                    !!this.minorConfig.signSwitchEndTime &&
                                    new Date().getTime() >
                                        this.minorConfig.signSwitchEndTime &&
                                    new Date().getTime() <
                                        this.minorConfig.querySwitchStartTime
                                )
                            ) {
                                list = result.data.list;
                                total = result.data.total_;
                            }
                        }
                    }
                    this.tableData = {
                        list: list,
                        total_: total
                    };
                }
            } catch (err) {
                console.log(err);
            }
        },
        //报名/变更操作
        async operate(type, item) {
            try {
                //type 1:报名 2:提交 3:取消报名
                if (type == 1) {
                    // const dataArray = this.tableData.list;
                    // if (dataArray.length > 0) {
                    //     for (let item of dataArray) {
                    //         if (item.apply * 1 == 0) {
                    //             this.isOption = 1;
                    //             break;
                    //         }
                    //     }
                    // }
                    let {code, data} = await checkIsApply();
                    if (code == 200) {
                        if (!!data) {
                            this.$message({
                                message: this.$t("minor.tip.applySignError"),
                                type: "warning"
                            });
                            return;
                        }
                    }
                    // if (this.isOption == 1) {
                    //     {
                           
                    //     }
                    // }

                    this.minorApplyDialog = true;
                    this.examineFileList = [];
                    this.examineInfoList = [];
                    this.majorName = item.majorNameZh;
                    let array = [];
                    array =
                        !!item.pointAndCourse &&
                        item.pointAndCourse.split(",").map(item => {
                            const s = item.lastIndexOf("(");
                            const e = item.lastIndexOf(")");
                            const obj = {};
                            obj.prerequisiteCourse = item.substring(0, s);
                            obj.point = item.substring(s + 1, e);
                            return obj;
                        });
                    this.applyQueryParams = Object.assign(item, {
                        pointList: array
                    });
                } else if (type == 3) {
                    const params = {
                        majorCode: item.majorCode,
                        studentNum: ""
                    };
                    if (
                        new Date().getTime() >
                        this.minorConfig.signSwitchEndTime - 60 * 60 * 1000
                    ) {
                        this.$message({
                            message: this.$t("minor.tip.cancelApplyError"),
                            type: "warning"
                        });
                    } else {
                        //取消报名
                        cancelApply(params).then(res => {
                            if (res.code == 200) {
                                this.search();
                                this.isOption = 0;
                            }
                        });
                    }
                } else {
                    const params = Object.assign(this.applyQueryParams, {
                        minorGradePoint: this.applyQueryParams.gradePoint,
                        minorMajor: this.applyQueryParams.majorCode,
                        minorSchool: this.applyQueryParams.schoolId,
                        attachId: this.examineInfoList[0]
                    });
                    const result = await addApplyInfo(params);
                    if (result.code == 200) {
                        this.minorApplyDialog = false;
                        this.$message({
                            message: this.$t("minor.tip.submitSuccess"),
                            type: "success"
                        });
                        this.search();
                    }
                }
            } catch (err) {
                console.log(err);
            }
        },
        //查询报名状态接口
        async queryApplyStatus() {
            try {
                const result = await queryIsApplyByStudentNo();
                if (result.code == 200) {
                    this.applyMsg.status = result.data && result.data[0].status;
                    this.applyMsg.majorNameZh =
                        result.data && result.data[0].majorNameZh;
                } else {
                    this.applyMsg.status = 2;
                }
            } catch (err) {
                console.log(err);
            }
        },
        pageChange(page) {
            this.queryParams.pageNum_ = page.pageNum;
            this.queryParams.pageSize_ = page.pageSize;
            this.search();
        },
        handleAvatarRemove(file, fileList) {
            this.examineFileList = fileList;
            this.examineInfoList = _.map(fileList, "name");
        },
        handleUploadSuccess(res, file, fileList) {
            this.examineFileList = fileList;
            this.examineInfoList = _.map(fileList, item => {
                return item.response.data[item.name].objectkey;
            });
        },
        //返回首页
        returnIndex() {
            this.$store.state.common.tabs.forEach((i, index) => {
                if (i.name == "mySign") {
                    this.$store.state.common.tabs.splice(index, 1);
                }
            });
            this.$router.replace("/workbench");
        },
        beforeAvatarUpload(file) {
            //上传附件的校验
            let fileType = file.name.split(".")[file.name.split(".").length - 1] || '';
            fileType = fileType.toLowerCase();
            const isIMAGE = fileType === "jpg" || fileType === "jpeg" || fileType === "png";
            const isLt4M = file.size / 1024 / 1024 < 4; //图片大小不超过4MB
            if (!isIMAGE) {
                this.$message({
                    message: this.$t("minor.tip.uploadFileError"),
                    type: "warning"
                });
            }
            if (!isLt4M) {
                this.$message({
                    message: this.$t("minor.tip.uploadSizeError"),
                    type: "warning"
                });
            }
            if (!(isIMAGE && isLt4M)) {
                //先清空附件
                this.$refs.uploadFile.clearFiles();
                return;
            }
        }
    }
};
</script>
<style scoped>
.el-step__line {
    margin-right: 50px;
}
.text {
    font-size: 12;
    color: red;
    margin-left: 10px;
}
.div {
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.no-power {
    text-align: center;
}
.no-power img {
    margin-top: 15vh;
}
.no-power p {
    font-size: 16px;
    color: rgb(43, 59, 78);
}
</style>

